<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: gray;
        }

        .con {
            width: 1000px;
            height: 500px;
            border: 10px solid black;
            margin: auto;
        }

        /* 设置输入框 */
        #inp {
            display: block;
            margin: auto;
            width: 90%;
            height: 100px;
            font-size: 60px;
            margin: auto;
        }

        /* 设置表格 */
        #tab {
            width: 90%;
            margin: auto;
            border: 10px solid red;
            height: 50%;
            border-collapse: collapse;
        }

        #tab td {
            width: 100px;
            border-collapse: collapse;
            border: 2px solid black;
            text-align: center;
            vertical-align: middle;
            font-size: 20px;
            color: white;
            cursor: pointer;
        }

        #tab td:hover {
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="con">
        <h1>计算器:</h1>
        <input type="text" id="inp">
        <table id="tab">
            <tr>
                <td colspan="2" id="clear">C</td>
                <td id="delone">回退</td>
                <td class="jud">/</td>
            </tr>
            <tr>
                <td class="num">1</td>
                <td class="num">2</td>
                <td class="num">3</td>
                <td class="jud">+</td>
            </tr>
            <tr>
                <td class="num">4</td>
                <td class="num">5</td>
                <td class="num">6</td>
                <td class="jud">-</td>
            </tr>
            <tr>
                <td class="num">7</td>
                <td class="num">8</td>
                <td class="num">9</td>
                <td class="jud">*</td>
            </tr>
            <tr>
                <td colspan="2" class="num">0</td>
                <td class="jud">.</td>
                <td id="equals">=</td>
            </tr>
        </table>
    </div>
    <script>
        //判断功能的总实现
        //1.不能出现"06"这种数字
        //->需要如果第一位是零，那么后面只能更小数点或者符号，如果输入其他数字则替换掉原先的零
        //2.计算完之后，如果输入的是数字，那就重新赋值，如果输入的是字符，那么就继续输入
        //->需要一个开关，当开关打开后就进行判断，如果输入的数字则重新赋值
        //3.不能出现重复的字符，而且字符不能出现在第一个
        var nature_num = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
        var char_list = ["*", "-", "+", "/", "."]
        var char = false
        function first(e) {
            
            //需求1.
            let str = inp.value
            let zero = str.substring(0, 1)
            if(char){
                inp.value += e.target.innerHTML
            }else if(e.target.classList.contains("num")){
                inp.value += e.target.innerHTML
            }
            

            if (zero === "0") {
                if (inp.value.length <= 2) {
                    let second = e.target.innerHTML
                    if (nature_num.includes(second)) {
                        inp.value = second
                    }
                }
            }
           
            //需求2.
            if (key) {
                key = false
                let num_jud = e.target.innerHTML
                if (nature_num.includes(num_jud)) {
                    inp.value = num_jud
                }
            }

            //需求3.
           



        }
        var key = false
        var inp = document.getElementById("inp");
        var tab = document.getElementById("tab");
        var tab_num = tab.querySelectorAll(".num")
        var tab_jud = tab.querySelectorAll(".jud")
        tab_jud.forEach(item=>{
            item.addEventListener("click",(e)=>{
                first(e)
                let first_char = inp.value.substring(0, 1)
            if (char_list.includes(first_char)) {
                inp.value = ""
            }
            let last_char = inp.value.substring(inp.value.length - 1)
            
            if (char_list.includes(last_char)) {
                let string =  inp.value.substring(0,inp.value.length-1)
                inp.value = string+e.target.innerHTML
                char = false
            }
                if(char){
                    inp.value += e.target.innerHTML
                }
            })
        })
        tab_num.forEach(item => {
            item.addEventListener("click", (e) => {
                first(e)
                char = true
            })
        })
        //实现清空功能
        var clear = document.getElementById("clear")
        clear.addEventListener("click", (e) => {
            inp.value = ""
        })
        //实现回退效果
        var delone = document.getElementById("delone");
        delone.addEventListener("click", (e) => {
            let str = inp.value
            str = str.substring(0, str.length - 1)
            inp.value = str
        })
        //实现相等功能
        var equals = document.getElementById("equals")
        equals.addEventListener("click", (e) => {

            if (inp.value) {
                key = true
                inp.value = eval(inp.value)
            }

        })

    </script>
</body>

</html>